
<!--只支持二三级为多个，其他层级都必须为一个-->
<template>
    <div style="width: 100%;height:600px;overflow: auto" id="big">
        <div style="float: left;position: fixed;z-index: 100">
            <el-row>
                <el-col :span="14">
                    <el-input type="number" placeholder="请输入内容" v-model="transformInput" @blur="onTransformInput">
                        <template slot="append">%</template>
                    </el-input>
                </el-col>
                <el-col :span="10">
                    <el-button plain style="margin-left: 10px" @click="onTransformInput('-')">-</el-button>
                    <el-button plain @click="onTransformInput('+')">+</el-button>
                </el-col>
            </el-row>
        </div>
        <div v-if="big_div_if" :style="{width: maxWidth + 'px','margin-left': 'auto','margin-right': 'auto'}" id="big-div">
            <el-card :title="false" style="padding: 0 !important;width: 300px;margin-right: auto;margin-left:auto">
                <div :style="{background:AllData.titleBackground,color:AllData.titleColor,width:'100%','text-align': !AllData.subTitle ? 'center' : 'left'}"
                     class="card-title">
                    {{AllData.title}}
                </div>
                <div v-if="AllData.subTitle"
                     :style="{background:AllData.subTitleBackground,color:AllData.subTitleColor,width:'100%'}"
                     class="card-subTitle">
                    {{AllData.subTitle}}
                </div>
            </el-card>
            <div :style="{width:'1px',height: '30px',
                        'border-left': '1px black solid','margin-right': 'auto','margin-left':'auto'}"/>
            <el-row type="flex" justify="end">
                <el-col v-for="(items,indexs) in data" :key="indexs">
                    <div :style="{width:width[indexs] + 'px'}">
                        <div v-if="data.length > 2 && indexs !== data.length - 1" style="" :style="{width:((width[indexs] / 2) + (width[indexs + 1] / 2)) + 'px',height: '30px',
                        'border-left': '1px black solid',
                        'border-top': '1px black solid',
                        'border-right':(indexs === data.length - 2 ? '1px black solid' : 'none'),
                        'margin-left': (width[indexs] / 2) + 'px'}"/>
                        <el-card :title="false"
                                 :style="{width: '300px','margin-left': 'auto','margin-right': 'auto','margin-top':((indexs === data.length - 1 && data.length > 1) ? '30px' : '')}">
                            <div :style="{background:items[0].titleBackground,color:items[0].titleColor,'text-align': !items[0].subTitle ? 'center' : 'left'}"
                                 class="card-title"
                                 v-html="items[0].title"/>
                            <div v-if="items[0].subTitle"
                                 :style="{background:items[0].subTitleBackground,color:items[0].subTitleColor}"
                                 class="card-subTitle"
                                 v-html="items[0].subTitle"/>
                        </el-card>
                        <div :style="{width:'100%',height: '30px',
                                            'border-left': '1px black solid','margin-left': '50%'}"/>
                        <el-row type="flex" justify="end">
                            <el-col v-for="(item,index) in items" :key="index" style="width: 320px">
                                <div v-if="(item instanceof Array)"
                                >
                                    <div v-for="(ite,inde) in item" :key="ite.key">
                                        <div v-if="items.length > 2 && index !== items.length - 1 && inde === 0"
                                             :style="{width:'100%',height: '30px',
                                            'border-top': '1px black solid',
                                            'margin-left': '50%'}"/>
                                        <div :style="{width:'100%',height: '30px',
                                         'margin-top':((index !== items.length - 1 && items.length !== 2 && inde === 0) ? '-30px' : ''),
                                            'border-left': '1px black solid','margin-left': '50%'}"/>
                                        <el-card :title="false"
                                                 :style="{width: '300px',margin: '0px 10px'}">
                                            <div :style="{background:ite.titleBackground,color:ite.titleColor}"
                                                 class="card-title"
                                                 v-html="ite.title"/>
                                            <div v-if="ite.subTitle"
                                                 :style="{background:ite.subTitleBackground,color:ite.subTitleColor}"
                                                 class="card-subTitle"
                                                 v-html="ite.subTitle"/>
                                        </el-card>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name: "FlowChart",
        props: {
            AllData: {
                type: Object,
                required: true
            },
        },
        data() {
            return {
                data: [],
                width: [],
                maxWidth: 0,
                transformInput: 100,
                big_div_if: true,
            }
        },
        created() {
            let data = [];
            for (let i = 0; i < this.AllData.children.length; i++) {
                let item = this.AllData.children[i];
                // data.push([
                //     {
                //         key: item.key,
                //         subTitle: item.subTitle,
                //         subTitleBackground: item.subTitleBackground,
                //         subTitleColor: item.subTitleColor,
                //         title: item.title,
                //         titleBackground: item.titleBackground,
                //         titleColor: item.titleColor,
                //     }, ...this.doChildrenToArray([], item.children)
                // ])
                let array = this.doChildrenToArray([], item.children)
                array.splice(0, 0, {
                    key: item.key,
                    subTitle: item.subTitle,
                    subTitleBackground: item.subTitleBackground,
                    subTitleColor: item.subTitleColor,
                    title: item.title,
                    titleBackground: item.titleBackground,
                    titleColor: item.titleColor,
                })
                data.push(array)
            }
            this.maxWidth = 0;
            this.width = [];
            for (let i = 0; i < data.length; i++) {
                this.width[i] = (data[i].length - 1) * 320;
                this.maxWidth += (data[i].length - 1) * 320;
            }
            this.data = data;
        },
        mounted() {
            document.getElementById("big").scrollLeft = (document.getElementById("big-div").clientWidth
                - document.getElementById("big").clientWidth) / 2
        },
        methods: {
            doChildrenToArray(children, data) {
                for (let i = 0; i < data.length; i++) {
                    if (children.length) {
                        let key = children[children.length - 1][0].key.split('_');
                        let key1 = data[i].key.split('_');
                        if (key1[1] === key[1]) {
                            children[children.length - 1].push({
                                    key: data[i].key,
                                    subTitle: data[i].subTitle,
                                    subTitleBackground: data[i].subTitleBackground,
                                    subTitleColor: data[i].subTitleColor,
                                    title: data[i].title,
                                    titleBackground: data[i].titleBackground,
                                    titleColor: data[i].titleColor,
                                }
                            )
                        } else {
                            children.push([{

                                    key: data[i].key,
                                    subTitle: data[i].subTitle,
                                    subTitleBackground: data[i].subTitleBackground,
                                    subTitleColor: data[i].subTitleColor,
                                    title: data[i].title,
                                    titleBackground: data[i].titleBackground,
                                    titleColor: data[i].titleColor,
                                }]
                            )
                        }
                    } else {
                        children.push(
                            [
                                {
                                    key: data[i].key,
                                    subTitle: data[i].subTitle,
                                    subTitleBackground: data[i].subTitleBackground,
                                    subTitleColor: data[i].subTitleColor,
                                    title: data[i].title,
                                    titleBackground: data[i].titleBackground,
                                    titleColor: data[i].titleColor,
                                }
                            ]
                        );
                    }
                    if (data[i].children.length) {
                        children = this.doChildrenToArray(children, data[i].children)
                    }
                }
                return children;
            },
            onTransformInput(key) {
                if (key === "-") {
                    if (+this.transformInput > 10) {
                        this.transformInput = +this.transformInput - 10;
                    }else{
                        this.$message.error("缩放不能小于10！");
                    }
                } else if (key === "+") {
                    if (+this.transformInput > 90) {
                        this.$message.error("缩放不能大于100！");
                        this.transformInput = 100;
                    }else{
                        this.transformInput = +this.transformInput + 10;
                    }
                } else {
                    if (+this.transformInput < 10) {
                        this.$message.error("缩放不能小于10！");
                        this.transformInput = 10;
                    } else if (+this.transformInput > 100) {
                        this.$message.error("缩放不能大于100！");
                        this.transformInput = 100;
                    } else {
                        this.transformInput = +this.transformInput;
                    }
                }
                // this.big_div_if = false;
                // this.$nextTick(() => {
                //     this.big_div_if = true;
                // })
                // this.maxWidth = this.maxWidth * (this.transformInput / 100);
                document.getElementById("big-div").style.transform = 'scale(' + (this.transformInput / 100) + ')';
                // document.getElementById("big-div").style.marginLeft = 'auto';
                // document.getElementById("big-div").style.marginTop = 'auto';
            },
        }
    }
</script>

<style scoped>
    .card-title {
        margin: -20px !important;
        padding: 10px 20px !important;
    }

    .card-subTitle {
        margin: -20px !important;
        padding: 10px 20px !important;
        margin-top: 10px !important;
    }
</style>